<template>
  <div class="flight-earth">
    <div id="flightEarth"></div>
  </div>
</template>

<script lang="ts" name="flight" setup>
  import 'echarts-gl';
  import { onMounted } from "vue";
  import * as echarts from 'echarts';
  import flights from '@/assets/json/flights.json';

  // 引入静态资源
  const bathyImg = new URL('@/assets/img/flights/bathy.jpeg', import.meta.url).href;
  const worldImg = new URL('@/assets/img/earth/world.jpg', import.meta.url).href;

  // json数据处理
  function getAirportCoord(idx: any) {
    return [flights.airports[idx][3], flights.airports[idx][4]];
  }
  let routes = flights.routes.map(function (airline) {
    return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
  });

  // 设立图表dom
  let chartObj: any = null;
  let flightDom: HTMLElement | null = null;

  // 渲染图表
  const renderChart = () => {
    flightDom = document.getElementById("flightEarth");
    chartObj = echarts.init(flightDom);
    chartObj.setOption({
      backgroundColor: '#000',
      globe: {
        baseTexture: worldImg,
        heightTexture: bathyImg,
        shading: 'lambert',
        light: {
          ambient: {
            intensity: 0.4
          },
          main: {
            intensity: 0.4
          }
        },
        viewControl: {
          autoRotate: false
        }
      },
      series: {
        type: 'lines3D',
        coordinateSystem: 'globe',
        blendMode: 'lighter',
        lineStyle: {
          width: 1,
          color: 'rgb(50, 50, 150)',
          opacity: 0.1
        },
        data: routes
      }
    });
  };

  onMounted(() => {
    renderChart();
  });
</script>

<style lang="less" scoped>
  .flight-earth {
    #flightEarth {
      width: 100vw;
      height: 100vh;
    }
  }
</style>